<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fregments::head(~{::title})">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据一览</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../static/lib/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/my.css">
    <!-- 动画 -->
    <link rel="stylesheet" href="../static/css/animate.css">
    <!-- bootstrap-bootstrapValidator-->
    <link rel="stylesheet" href="../static/lib/bootstrapValidator/bootstrapValidator.min.css">
</head>

<body>
<nav th:replace="fregments::menu(3)" class="navbar navbar-default navbar-fixed-top m-padding">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="../static/favicon.ico" style="width: 24px;">
            </a>
            <p class="navbar-text navbar-default"><a href="#" class="navbar-link m-a-none"><b>后台管理</b></a></p>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="admin/index.html"><span class="glyphicon glyphicon-home">&nbsp;</span>首页</a></li>
                <li><a href="admin/navigation.html"><span class="glyphicon glyphicon-tasks">&nbsp;</span>导航管理</a></li>
                <li class="active"><a href="admin/tag.html"><span class="glyphicon glyphicon-tag">&nbsp;</span>标签管理</a>
                </li>
                <li><a href="admin/link.html"><span class="glyphicon glyphicon-link">&nbsp;</span>链接管理</a></li>
                <li role="presentation" class="disabled"><a href="#"><span
                        class="glyphicon glyphicon-bookmark">&nbsp;</span>书签管理</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <img class="m-avatar img-circle" src="../static/images/me.jpg">
                        挚夕
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li><a href="#"><span class="glyphicon glyphicon-th">&nbsp;</span>个人主页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out">&nbsp;</span>登出</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索" style="width: 300px;">
                </div>
                <button type="submit" class="btn btn-default">
                    <a class="glyphicon glyphicon-search m-none"></a>
                </button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<th:block th:replace="fregments :: modal"></th:block>
<div class="m-margin-top">

    <div class="m-container">
        <!-- nav-link 图表-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6 col-sm-5 col-md-3">
                        <h4>一级导航链接统计</h4>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <!--                style="width: 500px;height:400px; background-color: cornsilk"-->
                <div id="link-nav-chart" class="col-xs-12 col-sm-12 col-md-12">

                </div>
            </div>
            <div class="panel-footer m-align-right">

            </div>
        </div>
        <!-- link 图表-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6 col-sm-5 col-md-3">
                        <h4>最热链接统计</h4>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="link-chart" class="col-xs-12 col-sm-12 col-md-12">

                </div>
            </div>
            <div class="panel-footer m-align-right">

            </div>
        </div>
        <!-- tag图表-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-6 col-sm-5 col-md-3">
                        <h4>最热标签统计</h4>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="tag-chart" class="col-xs-12 col-sm-12 col-md-12">

                </div>
            </div>
            <div class="panel-footer m-align-right">

            </div>
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<footer th:replace="fregments :: footer">
    <div>
        <div class="row">
            <div class="col-sm-4 col-md-4">
                <h3>挚夕导航</h3>
                <p>
                    挚夕导航最初源于本人想要做一个管理书签的系统。<br>
                    后来借鉴了一些导航网站，决定做一个网站导航。<br>
                    前端使用BootStrap。
                </p>
            </div>
            <div class="col-sm-8 col-md-8">
                占位
            </div>
        </div>
    </div>

    <div style="text-align: center;">
        Copyright 2023-now 挚夕导航 Designed by 挚夕
    </div>
</footer>

<!--/*/<th:block th:replace="fregments :: script">/*/-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../static/lib/jquery-1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<!--  bootstrap-dropdown-hover -->
<script src="../static/lib/bootstrap-dropdown-hover.js"></script>
<script src="../static/lib/toastr/toastr.min.js"></script>
<!-- bootstrap-bootstrapValidator-->
<script src="../static/lib/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../static/lib/bootstrapValidator/zh_CN.js"></script>
<!-- apache  echarts -->
<script src="../static/lib/echarts-5.4.3.min.js"></script>
<script>
    $(function () {
        //bootstrap-dropdown-hover
        $('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
            // see next for specifications
        });
        //特效
        $("li").hover(function () {
            $(this).toggleClass("m-up");
        })
    })
</script>
<!--/*/</th:block>/*/-->
<script>
    //设置图表高度
    var navLinkChart = echarts.init(document.getElementById('link-nav-chart'), null, {
        height: 400
    });
    var linkChart = echarts.init(document.getElementById('link-chart'), null, {
        height: 400
    });
    var tagChart = echarts.init(document.getElementById('tag-chart'), null, {
        height: 400
    });
    //加载导航链接表格数据
    $.ajax({
        type: 'get',
        url: '[[@{/display/getNavLinkData}]]',
        success: function (response) {
            if (response.status == 'success') {
                console.log(response.data);
                let option = {
                    tooltip: {
                        trigger: 'item',
                        position: ['50%', '50%']
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'horizontal',
                        top: 20,
                        bottom: 20
                    },
                    color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#57f1bf'],
                    series: [
                        {
                            name: '链接数',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: response.data
                        }
                    ]
                };
                option && navLinkChart.setOption(option);
            }
        },
        error: function (response) {
            toastr.error(response.responseText, "请求失败");
        }
    })

    //加载最热链接表格数据
    $.ajax({
        type: 'get',
        url: '[[@{/display/getHotLinkData}]]',
        success: function (response) {
            if (response.status == 'success') {
                console.log(response.data);
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: response.data.xAxis,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLabel: {
                                formatter: function (value) {
                                    return value.split("").join("\n");
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '浏览数',
                            type: 'bar',
                            barWidth: '60%',
                            data: response.data.value
                        }
                    ]
                };
                option && linkChart.setOption(option);
            }
        },
        error: function (response) {
            toastr.error(response.responseText, "请求失败");
        }
    })

    //加载最热标签表格数据
    $.ajax({
        type: 'get',
        url: '[[@{/display/getHotTagData}]]',
        success: function (response) {
            if (response.status == 'success') {
                console.log(response.data);
                let option;
                const data = response.data;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: data.legendData
                    },
                    series: [
                        {
                            name: '链接数',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: data.seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && tagChart.setOption(option);
            }
        },
        error: function (response) {
            toastr.error(response.responseText, "请求失败");
        }
    })

    //监听事件
    window.addEventListener('resize', function () {
        navLinkChart.resize();
    });
    window.addEventListener('resize', function () {
        linkChart.resize();
    });
    window.addEventListener('resize', function () {
        tagChart.resize();
    });

</script>
</body>

</html>